<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片上下滚动</title>
<script type="text/javascript" src="jquery/jquery.1.5.2.js"></script>
</head>
<body>
<div id="demo" style="border:1px solid red;overflow:hidden;width:100px;height:400px;">
    <table border="0" align="center" style="border-collapse:collapse;">
        <!--第一行-->
        <tr id="demoTop">
            <td valign="top">
                <table border="0" style="border-collapse:collapse;">
                    <tr align="center"><td><a href="javascript:void(0);"><img src="scroll_image/1.gif" width="100" height="100"></a></td></tr>
                    <tr align="center"><td><a href="javascript:void(0);"><img src="scroll_image/2.gif" width="100" height="100"></a></td></tr>
                    <tr align="center"><td><a href="javascript:void(0);"><img src="scroll_image/3.gif" width="100" height="100"></a></td></tr>
                    <tr align="center"><td><a href="javascript:void(0);"><img src="scroll_image/4.gif" width="100" height="100"></a></td></tr>
                    <tr align="center"><td><a href="javascript:void(0);"><img src="scroll_image/5.gif" width="100" height="100"></a></td></tr>
                </table>
            </td>
        </tr>
        <!--第一行-->
        <!--第二行-->
        <tr id="demoBottom"></tr>
        <!--第二行-->
    </table>
</div>
<script type="text/javascript">
function scroll(box,topBox,bottomBox,timer,direction){
    function marqueeUp(){
        if(demo.scrollTop()>=demoTop.height()){
            demo.scrollTop(0);
        }
        else{
            demo.scrollTop(demo.scrollTop()+1);
        }
    }
    function marqueeDown(){
        if(demo.scrollTop()==0){
            demo.scrollTop(demoTop.height());
        }
        else{
            demo.scrollTop(demo.scrollTop()-1);
        }
    }
    var demo=$(box);
    var demoTop=$(topBox);
    var demoBottom=$(bottomBox);
    if(direction=="up"){
        var fn=marqueeUp;
    }
    else if(direction=="down"){
        var fn=marqueeDown;
    }
    demoBottom.html(demoTop.html());
    var temp=setInterval(fn,timer);
    demo.mouseover(function(){
        clearInterval(temp);
    });
    demo.mouseout(function(){
        temp=setInterval(fn,timer);
    });
}

$(document).ready(function(){
    scroll("#demo","#demoTop","#demoBottom",30,"down");
});
/*
5个参数的含义分别如下
1.容器
2.内容容器
3.占位容器
4.时间间隔(单位毫秒)
5.方向(取值up和down)
*/
</script>
</body>
</html>
